<template>
	<div class="goods-item">
		<div class="goods-images">
			<img class="goods-img" v-lazy="item.skuImage" />
		</div>
		<div class="goods-content">
			<h2 class="goods-name">
				<i class="iconfont icon-jingdong jd"></i>
				{{ item.skuName }}
			</h2>
			<div class="goods-info">
				<div class="discount">
					<div class="coupon" v-if="item.couponDiscount">
						<div class="circle-left"></div>
						<div class="circle-right"></div>
						{{ item.couponDiscount }}元券
					</div>
					<div class="subsidy">
						<div class="circle-left"></div>
						<div class="circle-right"></div>
						补贴¥{{ item.couponCommissionApp | Fixed(2) }}
					</div>
				</div>
				<div class="sale">销量{{ item.inOrderCount30Days | formatMyriadNum }}</div>
			</div>
			<div class="share">
				<span @click="toShare">分享</span>
			</div>
			<div class="goods-footer">
				<div class="goods-price">
					<div class="deal">
						到手价
						<p>
							¥<span>{{ item.lowestCouponPrice }}</span>
						</p>
					</div>
					<i class="line"></i>
					<div class="original">
						京东
						<p>¥{{ item.price | Fixed(2) }}</p>
					</div>
				</div>
				<div class="buy-btn" @click="toBuy(item)">去购买</div>
			</div>
		</div>
	</div>
</template>

<script>
import store from 'store';
import { Toast } from 'vant';
import JdLoadingDig from '@/components/jd/JdLoadingDig';
export default {
	name: 'JdGoodsItem',
	components: {
		JdLoadingDig
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		type: {
			type: String,
			default: () => {
				return '';
			}
		}
	},
	methods: {
		toBuy(item) {
			this.$emit('openDig');
			this.$service.jd.goods
				.createShortUrl({
					materialUrl: item.materialUrl,
					couponLink: item.couponLink
				})
				.then(res => {
					this.$emit('success', res);
				})
				.catch(err => {
					this.$emit('error');
					setTimeout(() => {
						Toast(err);
					}, 500);
				});
		},

		toShare() {
			this.$router.push({
				path: `/jd/goods-share/`,
				query: {
					skuId: this.item.skuId
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-item {
	width: 100%;
	background: $color-white;
	@include flexBox(space-between);
	.goods-images {
		width: 240px;
		height: 240px;
		border-radius: 8px;
		overflow: hidden;
		@include flexBox(center, center);
		img {
			max-width: 100%;
			max-height: 100%;
		}
	}
	.goods-content {
		height: 260px;
		flex: 1;
		margin-left: 30px;
		@include flexBox(space-between, null, column);
		.goods-name {
			font-size: 28px;
			line-height: 36px;
			color: $text-black;
			@include ellipsis(2);
			.jd {
				color: #d00003;
			}
		}
		.goods-info {
			margin-bottom: 30px;
			@include flexBox(space-between, center);
			.discount {
				height: 28px;
				display: flex;
				.coupon {
					line-height: 28px;
					padding: 0 18px;
					background: $main-color;
					border-radius: 4px;
					display: inline;
					font-size: 20px;
					color: $color-white;
					position: relative;
					margin-right: 20px;
				}
				.subsidy {
					line-height: 28px;
					padding: 0 18px;
					background: #ffeed1;
					border-radius: 4px;
					display: inline;
					font-size: 20px;
					color: #925114;
					position: relative;
				}
				.circle-left {
					width: 12px;
					height: 12px;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6px;
					left: -6px;
				}
				.circle-right {
					width: 12px;
					height: 12px;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6px;
					right: -6px;
				}
			}
			.sale {
				font-size: 20px;
				color: $text-grey;
			}
		}
		.goods-price {
			color: $text-grey-default;
			font-size: 24px;
			@include flexBox(null, center);
			.line {
				/* prettier-ignore */
				width: 1PX;
				height: 30px;
				background: $text-grey-default;
				margin: 0 20px;
			}
			.deal {
				p {
					color: $main-color;
					font-weight: 600;
					span {
						font-size: 32px;
					}
				}
			}
			.original {
				p {
					margin-top: 8px;
				}
			}
		}
	}
}

.share {
	font-size: 25px;
	color: #b5b5b5;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.goods-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.goods-price {
		display: flex;
		align-items: center;
		color: #b5b5b5;
		font-size: 24px;

		.line {
			/* prettier-ignore */
			width: 1px;
			height: 30px;
			background: #b5b5b5;
			margin: 0 20px;
		}
		.deal {
			.value {
				color: #f70114;
				font-weight: 600;
				span {
					font-size: 32px;
				}
			}
		}
		.original {
			div {
				margin-top: 8px;
			}
		}
	}
	.buy-btn {
		font-size: 25px;
		color: #f70114;
		border: 2px solid #f70114;
		border-radius: 18px;
		padding: 5px 10px;
	}
}
</style>
